<template>
    <div class="cinema_body">
        <loading v-if="isLoading"/>
        <scroller v-else>    
            <ul>
                <li v-for="item in comingMoviesList" :key="item.id">
                    <div @tap="handleToDetail(item.id)" class="movie-poster">
                        <img v-lazy="$picFix(item.img, '128.180')" alt="">
                    </div>
                    <div class="comingMovie-list">
                        <h2 @tap="handleToDetail(item.id)">
                            {{ item.nm }}
                            <img  v-if ="item.version" src="@/assets/maxs.png"> 
                        </h2>
                        <p>
                            <span class="person">{{ item.wish }}人想看</span>
                        </p>
                        <p>
                            主演:{{ item.star }}
                        </p>
                        <p>
                            {{ item.rt }}上映
                        </p>
                    </div>
                    <div class="pre-sale">
                        预售
                    </div>
                </li>
            </ul> 
        </scroller> 
    </div>
</template>

<script>
export default {
    name: 'ComingSoon',
    data () {
        return {
            comingMoviesList: [],
            isLoading: true,
            prevCityId: -1
        }
    },
    methods: {
        handleToDetail (movieId) {
            this.$router.push('/movie/movieDetail/2/' + movieId)
        }
    },
    activated () {
        var cityId = this.$store.state.city.id
        if(this.prevCityId === cityId) {return}
        this.isLoading = true 

        this.$axios.get('/api/movieComingList?cityId=' + cityId) 
        .then(res => {
            const msg = res.data.msg
            if (msg === 'ok') {
                console.log(res.data)
                const comingMovieData = res.data.data
                this.comingMoviesList = comingMovieData.comingList
                this.isLoading = false
                this.prevCityId = cityId
            }
        })
        .catch(err => {
            console.log('请求失败' + err)
        })
    }
}
</script>

<style lang="scss" scoped>
.cinema_body {
    flex: 1;
    overflow: auto;
    ul {
        margin: 0 12px;
        overflow: hidden;
        li {
            margin-top: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid $bdColor;
            @include flex-align;
        }
    }
    .movie-poster {
        width: 64px;
        height: 90px;
        img {
            width: 100%;
        }
    }
    .comingMovie-list {
        margin-left: 10px; 
        flex: 1; 
        position: relative;
        h2 {
            width: 150px; 
            line-height: 24px; 
            font-size: 17px;
            @include text-emphasis;
            img {
                width: 50px; 
                position: absolute; 
                right: 10px; 
                top: 5px;
             }
        }
        p {
           width: 200px; 
           font-size: 13px; 
           color:#666; 
           line-height: 22px; 
           @include text-emphasis;
        }
    }
     .pre-sale {
         width: 47px; 
         height: 27px; 
         line-height: 28px; 
         text-align: center;
         background: #3c9fe6;
         color: $color; 
         border-radius: 4px; 
         font-size: 14px; 
         cursor: pointer;  
     }
}
</style>
